<template>
	<view class="itinerary">
		<text>每日行程</text>
		<view class="collapsec-box" :class="{'collapsec-box-close' : !isShowCollaspe[index] }"
			v-for="(item, index) in tripDetailsInfo" :key="index">
			<view class="Close-box" @click="openCollapse(index)">
				<view class="Close-lt" :class="{'Close-lt-open' : isShowCollaspe[index]}">
					DAY
					<text>{{item.trip_day_number}}</text>
				</view>
				<view class="Close-rt">
					<view class="lt-hd">
						<view class="hd-title" :class="{'hd-title-open': isShowCollaspe[index]}">
							{{item.trip_detail_title}}
							<text>{{item.trip_detail_content}}</text>
						</view>
						<view class="hd-open">
							<image v-if="isShowCollaspe[index]" class="open"
								src="https://img.js.design/assets/img/66ce933e8afcb6064d0afdc3.png#53aa147d3e6b380a2691caf59801a977"
								mode=""></image>
							<image v-else class="close"
								src="https://img.js.design/assets/img/66ce933e8afcb6064d0afdc3.png#53aa147d3e6b380a2691caf59801a977"
								mode=""></image>

						</view>
					</view>
					<!-- <view class="lt-fd" v-if="!isShowCollaspe[index]">
						{{sonListTitles[index]}}
					</view> -->
				</view>
			</view>
			<view class="content-container" v-if="isShowCollaspe[index]">
				<view class="content-box" v-for="(item_a,index_A) in item.trip_day_detail_son_list" :key="index_A">
					<view class="title">{{item_a.trip_day_detail_title}}</view>
					<view class="content">{{item_a.trip_day_detail_content}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		onMounted
	} from 'vue';
	const props = defineProps({
		tripDetailsInfo: {
			type: Array,
			default: []
		}
	})
// 初始化折叠状态，默认全部关闭
const isShowCollaspe = ref([]);

// 监听props变化，当tripDetailsInfo更新时重置isShowCollaspe
watch(() => props.tripDetailsInfo, (newVal) => {
	if (newVal && newVal.length > 0) {
		isShowCollaspe.value = newVal.map((_, index) => index === 0);
	} else {
		isShowCollaspe.value = [];
	}
}, { immediate: true });

// 组件挂载时确保第一个展开
onMounted(() => {
	if (props.tripDetailsInfo.length > 0) {
		isShowCollaspe.value[0] = true;
	}
});
	const openCollapse = (index) => {
		isShowCollaspe.value[index] = !isShowCollaspe.value[index];
	}
	// // 优化行程标题生成逻辑
	// const tripTitles = computed(() => {
	// 	return props.tripDetailsInfo.map((item, index) => {
	// 		const title = item.trip_detail_title?.trim() || '';
	// 		if (index === 0) {
	// 			return title ? `出发地 > ${title}` : '出发地';
	// 		} else if (index === props.tripDetailsInfo.length - 1) {
	// 			const prevTitle = props.tripDetailsInfo[index - 1]?.trip_detail_title?.trim() || '';
	// 			return prevTitle ? `${prevTitle} > 返回地` : '返回地';
	// 		} else {
	// 			const prevTitle = props.tripDetailsInfo[index - 1]?.trip_detail_title?.trim() || '';
	// 			return prevTitle && title ? `${prevTitle} > ${title}` : title || prevTitle;
	// 		}
	// 	});
	// });
	// 优化子行程标题生成逻辑
	const sonListTitles = computed(() => {
		return props.tripDetailsInfo.map((item) => {
			const sonList = item.trip_day_detail_son_list || [];
			if (!sonList.length) return '';

			return sonList
				.map(sonItem => sonItem.trip_day_detail_title?.trim())
				.filter(Boolean)
				.join(' - ');
		});
	});
</script>

<style scoped>
	.itinerary {
		font-family: "仓耳渔阳体 W05";
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.itinerary text {
		font-size: 32rpx;
		font-weight: 600;
		color: rgba(21, 11, 71, 1);
	}

	.collapsec-box {
		max-height: 2000rpx;
		width: 100%;
		margin: 20rpx 0rpx;
		background-color: rgba(227, 227, 227, 0.5);
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 18rpx;
		border: 2rpx solid rgba(227, 227, 227, 0.5);
		transition: all 0.3s ease;
		overflow: hidden;
	}

	.collapsec-box-close {
		height: 240rpx;
		background: rgba(255, 255, 255, 1);
		padding: 20rpx 24rpx;
	}

	.Close-box {
		display: flex;
		align-items: flex-start;
		min-height: 120rpx;
	}

	.Close-lt {
		padding: 10rpx 20rpx;
		position: relative;
		font-size: 24rpx;
		font-weight: 400;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-width: 80rpx;
		height: 120rpx;
	}

	.Close-lt::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 4rpx;
		height: 120rpx;
		border-right: 4rpx dashed rgba(191, 191, 191, 1);
	}

	.Close-lt-open {
		color: rgba(4, 75, 173, 1);
	}

	.Close-lt text {
		font-size: 32rpx;
		font-weight: 400;
		margin-top: 4rpx;
	}

	.Close-lt-open text {
		color: rgba(4, 75, 173, 1);
	}

	.Close-rt {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.lt-hd {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.hd-title {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		padding-right: 20rpx;
		line-height: 1.6;
	}

	.hd-title-open {
		color: rgba(4, 75, 173, 1);
	}

	.hd-title text {
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		margin-top: 8rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.4;
		word-break: break-all;
	}

	.hd-title-open text {
		color: rgba(4, 75, 173, 1);
	}

	.hd-open {
		padding-top: 6rpx;
	}

	.hd-open .close {
		width: 32rpx;
		height: 32rpx;
		flex-shrink: 0;
	}

	.hd-open .open {
		width: 32rpx;
		height: 32rpx;
		flex-shrink: 0;
		transform: rotate(-180deg);
	}

	.lt-fd {
		font-size: 20rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.4;
		margin-top: 8rpx;
		word-break: break-all;
	}

	.content-container {
		margin-top: 20rpx;

	}

	.content-box {
		padding: 0rpx 20rpx 0rpx 80rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		border-left: 4rpx dashed rgba(191, 191, 191, 1);
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.content-box .title {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.content-box .content {
		font-size: 20rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);
	}
</style>